<template>
	<view class="">
		<view class="u-page">
		
		
		
		<u-tabs :list="nav" :is-scroll="false" :current="current" @change="change"></u-tabs>

		<view class="bg u-flex"
			:style="{backgroundImage:item.status==2?'url('+imagesurl+'app/images/coupon.png)':'url('+imagesurl+'app/images/coupon_gray.png)'   }"
			v-for="(item,index) in list" :key="index">
			<view class="" style="width: 210rpx;text-align: center;">
				<view class="" style="color: #fff;font-size: 50rpx;">
					<text style="font-size: 30rpx;">￥</text> {{item.money}}
				</view>
				<view class="" style="font-size: 24rpx;color: #FFFFFF;">
					满{{item.needMoney}}元可用
				</view>
			</view>
			<view class="" style="width: 400rpx;padding:0 40rpx ;">
				<view style="font-weight: bold;font-size: 30rpx;">满{{item.needMoney}}减{{item.money}}优惠券</view>
				<view style="margin: 20rpx 0;font-size: 24rpx;color: #999999;">{{item.endStr}}</view>
				<view style="font-size: 24rpx;color: #999999;padding-top: 20rpx;" class="u-border-top">不可叠加使用</view>
			</view>
			<view class="" style="width: 80rpx;;text-align: center;">
				<view v-if="item.status==2" style="color: #5596FF">
					立</br>即</br>使</br>用
				</view>
				<view v-else style="color: #999999">
					已</br>使</br>用
				</view>

			</view>

		</view>
	


		<u-loadmore :status="status" v-if="list.length"/>
		
		<view class="empty" v-else>
			<u-empty mode="coupon"></u-empty>
		</view>
		
		
		<u-tabbar  @change="select" :list="tabbar" :mid-button="true" height="100rpx" active-color="#0263C2"></u-tabbar>
	   </view>
	</view>


</template>
<script>
	import url from '@/common/baseUrl.js';
	import scan from '@/common/scan.js';
	import loader from '@/common/loadPage.js';

	export default {
		mixins: [loader],
		data() {
			return {
				imagesurl: url.imageUrl,
				nav: [{
					name: '未使用'
				}, {
					name: '已使用'
				}, {
					name: '已过期',
				}],
				list: [],
				current: 0,
				initial: {
					geturl: "/api/user/coupon",
					parm: {
						status: ''
					},
					isPage: true
				},
				tabbar: [],

			}
		},
		onReady() {
			this.tabbar = this.$store.state.tabbar
		},
		onShow() {
			this.initial.page = 1;
			this.jiazai()
		},
		methods: {
		
			select(e){
				if(e==2){
					scan.scan()
				}
			},
			change(index) {
				this.current = index;
				this.initial.page = 1;
				this.jiazai()
			},
			jiazai() {

				if (!this.current) {
					this.initial.parm.status = 2
					
				}
				if (this.current == 1) {
					this.initial.parm.status = 1
				}
				if (this.current == 2) {
					this.initial.parm.status = 0
				}

				this.getGoods()

			}
		}
	}
</script>

<style>
	page {
		background: #f1f1f1;
	}

	.change {
		opacity: 0.6;
	}

	.bg {
		background-size: cover;
		width: 690rpx;
		height: 200rpx;


		margin: 30rpx auto;
	}
</style>
